﻿@{ Layout = "../Shared/_Layout.cshtml"; }
@section Navs{
<template v-if="pageType == $pageTypeAdmin">
  <li class="nav-item">
    <a class="nav-link active" href="pageAdministrator.aspx">管理员管理</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="pageAdminRole.aspx">角色管理</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="pageAdminConfiguration.aspx">管理员设置</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="pageAdminDepartment.aspx">所属部门管理</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="pageAdminArea.aspx">所在区域管理</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="adminAccessTokens.cshtml">API密钥管理</a>
  </li>
</template>
<template v-else-if="pageType == $pageTypeUser">
  <li class="nav-item">
    <a class="nav-link" :href="'adminView.cshtml?pageType=' + $pageTypeUser + '&userId=' + userId">查看资料</a>
  </li>
  <li class="nav-item">
    <a class="nav-link active" :href="'adminProfile.cshtml?pageType=' + $pageTypeUser + '&userId=' + userId">修改资料</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" :href="'adminPassword.cshtml?pageType=' + $pageTypeUser + '&userId=' + userId">更改密码</a>
  </li>
</template>
}

<template v-if="pageType == $pageTypeAdmin">
  <div v-if="userId == 0" class="header-title">添加管理员</div>
  <div v-else class="header-title">修改资料</div>
  <p class="text-muted font-13 m-b-25"></p>
</template>

<div class="form-group">
  <label>
    账号
    <small v-show="errors.has('userName')" class="text-danger">{{ errors.first('userName') }}</small>
  </label>
  <input v-model="adminInfo.userName" :disabled="adminInfo.id > 0" name="userName" data-vv-as="账号" v-validate="'required|alpha_dash'"
      :class="{'is-invalid': errors.has('userName') }" type="text" class="form-control" />
  <small class="form-text text-muted">帐号用于登录系统，由字母、数字组成</small>
</div>

<div class="form-group">
  <label>
    姓名
    <small v-show="errors.has('displayName')" class="text-danger">{{ errors.first('displayName') }}</small>
  </label>
  <input type="text" v-model="adminInfo.displayName" name="displayName" data-vv-as="姓名" v-validate="'required'" :class="{'is-invalid': errors.has('displayName') }" type="text" class="form-control" />
</div>

<div class="form-group">
  <label>头像</label>
  <div>
    <img style="max-width: 160px;max-height: 160px;" :src="adminInfo.avatarUrl ? adminInfo.avatarUrl : '../assets/images/default_avatar.png'"
      class="img-responsive rounded-circle" />
    <file-upload class="btn btn-success btn-sm m-t-10" :post-action="uploadUrl" extensions="gif,jpg,jpeg,png,webp"
      accept="image/png,image/gif,image/jpeg,image/webp" :multiple="false" v-model="files" v-on:input-file="inputAvatar"
      ref="avatar">
      上 传
    </file-upload>
  </div>
</div>

<template v-if="adminInfo.id === 0">
  <div class="form-group">
    <label>
      密码
      <small v-show="errors.has('password')" class="text-danger">{{ errors.first('password') }}</small>
    </label>
    <input v-model="password" type="password" class="form-control" name="password" data-vv-as="密码" v-validate="'required'" :class="{'is-invalid': errors.has('password') }">
  </div>
  <div class="form-group">
    <label>
      确认密码
      <small v-if="errors.has('confirmPassword')" class="text-danger">{{ errors.first('confirmPassword') }}</small>
      <small v-else-if="password != confirmPassword" class="text-danger">确认密码和密码不一致</small>
    </label>
    <input type="password" v-model="confirmPassword" name="confirmPassword" class="form-control" data-vv-as="确认密码" v-validate="'required'" :class="{'is-invalid':
errors.has('confirmPassword') || password != confirmPassword}">
  </div>
</template>

<div class="form-group">
  <label>
    手机号码
    <small v-show="errors.has('mobile')" class="text-danger">{{ errors.first('mobile') }}</small>
  </label>
  <input type="text" v-model="adminInfo.mobile" name="mobile" class="form-control" data-vv-as="手机号码"  v-validate="'mobile'" :class="{'is-invalid': errors.has('mobile')}">
  <small class="form-text text-muted">可用于登录、找回密码等功能。</small>
</div>

<div class="form-group">
  <label>
    电子邮箱
    <small v-show="errors.has('email')" class="text-danger">{{ errors.first('email') }}</small>
  </label>
  <input type="email" v-validate="'email'" v-model="adminInfo.email" name="email" class="form-control" data-vv-as="电子邮箱" :class="{'is-invalid': errors.has('email')}">
  <small class="form-text text-muted">可用于登录、找回密码等功能。</small>
</div>

<div class="form-group">
  <label>所属部门</label>
  <select v-model="adminInfo.departmentId" class="form-control">
    <option v-for="department in departments" :value="department.key">{{department.value}}</option>
  </select>
</div>

<div class="form-group">
  <label>所在区域</label>
  <select v-model="adminInfo.areaId" class="form-control">
    <option v-for="area in areas" :value="area.key">{{area.value}}</option>
  </select>
</div>

<hr />

<div class="text-center">
  <button class="btn btn-primary" v-on:click="btnSubmitClick">确 定</button>
  <button v-if="pageType == $pageTypeAdmin" class="btn ml-1" v-on:click="btnReturnClick">返 回</button>
</div>

@section Scripts{
<script src="../assets/js/vue-upload-component-2.8.14.js" type="text/javascript"></script>
<script src="adminProfile.js" type="text/javascript"></script> }